﻿@model IEnumerable<FairyWorld.Models.Chatroom>

@{
    ViewBag.Title = "ChatRoom";
    Layout = "~/Views/Shared/GroupLayout.cshtml";
}

<script type="text/javascript">
    $(document).ready(function () {
        $("#chatli").attr("class", "active");
    })
    document.onkeydown = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13) { // enter 键
            sendMessage();
        }
    };
    function sendMessage() {
        $.post("/Group/ChatRoom", { "msg": $('#msg').val() });
        $('#wholeMessages').prepend("<tr><td class='span2'>" + $('#UserName').val() + ":</td><td class='span5'>" + $('#msg').val() + "</td><td class='span3'>刚刚</td></tr>");
        $('#msg').val("");
    };
    function ajaxGetData() {
        $.post("/Group/ChatRoomAjax", { "num": 20 },
            function (data) {
                var str = "";
                for (var item = data.length - 1; item > data.length-21 && item >= 0; item--) {
                    str += "<tr><td class='span2'>" + data[item].username + ":</td><td class='span5'>" + data[item].action + "</td><td class='span3'>" + eval('new ' + eval(data[item].time).source).toLocaleString(); + "</td></tr>";
                         }
                document.getElementById("wholeMessages").innerHTML = str;
            });
    }
    window.onload = function () {
        ajaxGetData();
        var scrolltimer = self.setInterval(ajaxGetData, 10000);
    }
</script>
<style type="text/css">
	.wrap1{ 
	width:980px; 
	background-color:#ccc; 
	position:relative; 
	transform:rotate(-1.5deg); 
	-moz-transform:rotate(-1.5deg); 
	-webkit-transform:rotate(-1.5deg);
	}
	.wrap2{ 
	width:920px; 
	background-color:#fff; 
	position:relative;
	transform:rotate(1.5deg); 
	-moz-transform:rotate(1.5deg);
	-webkit-transform:rotate(1.5deg); 
	box-shadow:1px 1px 4px rgba(0,0,0,0.4); 
	-moz-box-shadow:1px 1px 4px rgba(0,0,0,0.4);
	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.4);
    padding:30px;
	}
</style>

<input type="hidden" value="@ViewBag.User.username" id="UserName" />


<div class="input-append">
    <input class="input-xxlarge" type="text" id="msg" placeholder="你想说什么（团队讨论、发布通知、不吐不快）…" />
    <input type="button" id="broadcast" class="btn" value="发送" onclick="sendMessage()"/>
</div>

<br />
<div style="margin-top:10px">
    <div class="wrap1">
		<div class="wrap2">
            聊天室内容:
            <br />
            <table id="wholeMessages" border="0" class="table">
                <tr>
                    <th class="span1"></th>
                    <th class="span6"></th>
                    <th class="span3"></th>
                </tr>
            </table>
        </div>
    </div>
</div>